প্রথম Elm প্রোগ্রাম লেখা এবং রান করা
Elm প্রোগ্রামিং ভাষায় প্রথম প্রোগ্রাম লেখা এবং রান করা একটি সরল প্রক্রিয়া। এই টিউটোরিয়ালে আমরা একত্রে প্রথম Elm প্রোগ্রামটি তৈরি করব এবং রান করব।
১. Elm ডেভেলপমেন্ট পরিবেশ প্রস্তুত করা
প্রথমে আপনাকে Elm ডেভেলপমেন্ট পরিবেশ ইনস্টল করতে হবে, যা আমরা আগের টিউটোরিয়ালে আলোচনা করেছি। নিশ্চিত করুন যে Elm ইনস্টল করা আছে এবং আপনার কম্পিউটার প্রস্তুত।
২. নতুন Elm প্রজেক্ট তৈরি করা
একটি নতুন Elm প্রজেক্ট শুরু করার জন্য, প্রথমে একটি নতুন ফোল্ডার তৈরি করুন এবং সেখানে একটি নতুন Elm প্রজেক্ট ইনিশিয়ালাইজ করুন।
২.১. নতুন ফোল্ডার তৈরি করুন
mkdir my-first-elm-app
cd my-first-elm-app২.২. Elm প্রজেক্ট ইনিশিয়ালাইজ করুন
elm initএটি elm.json ফাইল তৈরি করবে, যা প্রজেক্টের কনফিগারেশন এবং ডিপেনডেন্সি ম্যানেজমেন্টে সাহায্য করবে।
৩. Elm ফাইল তৈরি করা
এখন আপনার প্রজেক্ট ফোল্ডারে একটি নতুন Elm ফাইল তৈরি করুন। এই ফাইলের নাম হবে Main.elm, এবং এখানে আপনি প্রথম প্রোগ্রামটি লিখবেন।
mkdir src
touch src/Main.elmএখন src/Main.elm ফাইলটি খুলে প্রথম Elm কোড লিখুন:
module Main exposing (..)
import Html exposing (text)
main =
text "Hello, Elm!"এটি একটি অত্যন্ত সহজ Elm প্রোগ্রাম, যা "Hello, Elm!" টেক্সট প্রদর্শন করবে।
৪. Elm কোড কম্পাইল করা
Elm কোড কম্পাইল করতে আপনাকে elm make কমান্ড ব্যবহার করতে হবে। এটি আপনার Elm ফাইলটি কম্পাইল করে একটি জাভাস্ক্রিপ্ট ফাইলে রূপান্তর করবে।
elm make src/Main.elm --output=main.jsএটি main.js ফাইল তৈরি করবে, যা আপনি আপনার HTML পেজে ব্যবহার করতে পারবেন।
৫. HTML ফাইল তৈরি করা
এখন একটি HTML ফাইল তৈরি করতে হবে যাতে main.js ফাইলটি লোড করা হবে। নতুন একটি HTML ফাইল তৈরি করুন, যেমন index.html:
touch index.htmlএখন, index.html ফাইলে এই কোডটি যোগ করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elm Application</title>
</head>
<body>
<h1>Elm Application</h1>
<div id="elm"></div>
<script src="main.js"></script>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
</body>
</html>এটি main.js ফাইলটি HTML পেজে লোড করবে এবং Elm অ্যাপ্লিকেশনটি "elm" আইডি সম্বলিত ডিভে রেন্ডার করবে।
৬. ডেভেলপমেন্ট সার্ভার চালানো
আপনি যদি আপনার প্রজেক্টটি একটি লোকাল সার্ভারে চালাতে চান, তাহলে elm-live ইনস্টল করতে পারেন:
npm install -g elm-liveএখন, নিচের কমান্ড দিয়ে সার্ভার চালান:
elm-live src/Main.elm --openএটি আপনার প্রজেক্টটি লোকাল সার্ভারে চালাবে এবং স্বয়ংক্রিয়ভাবে ব্রাউজারে ওপেন করবে।
৭. ব্রাউজারে প্রথম Elm প্রোগ্রাম দেখা
এখন আপনি index.html ফাইলটি ব্রাউজারে খুললে, আপনি "Hello, Elm!" টেক্সট দেখতে পাবেন। এর মাধ্যমে আপনার প্রথম Elm প্রোগ্রামটি সফলভাবে রান হয়েছে।
উপসংহার
এটি ছিল আপনার প্রথম Elm প্রোগ্রাম লেখার এবং রান করার ধাপ। আপনি দেখলেন যে Elm প্রোগ্রামিং ভাষা কীভাবে সহজে শুরু করা যায় এবং কীভাবে কোড কম্পাইল করে তা ব্রাউজারে দেখানো যায়। এই প্রক্রিয়া অনুসরণ করে আপনি আরও জটিল Elm প্রোগ্রাম তৈরি করতে পারবেন।
Read more
